<template>
  <el-dialog v-el-drag-dialog title="选择目录" :visible.sync="visible">
    <el-card style="margin-left:5px;">
      <el-button-group style="display:flex;margin-bottom:15px;">
        <el-input v-model="filterFileText" style="margin-right:5px;" placeholder="搜索路径" />
      </el-button-group>

      <el-tree
        ref="fileTree"
        node-key="id"
        :props="treeProps"
        :filter-node-method="filterNode"
        :load="loadNode"
        :default-expand-all="expandAll"
        lazy
        class="filter-tree"
        check-strictly
        highlight-current
        check-on-click-node
        @node-click="selectNodeClick"
      >
        <span slot-scope="{ data }" class="custom-tree-node" style="width:100%;">
          <span>{{ data.name }}</span>
        </span>
      </el-tree>
    </el-card>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">确 定</el-button>
      <el-button @click="visible = false">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { fileTreeData } from '@/api/tool/file'

export default {
  name: 'FileTreeDialog',
  props: {
    appendToBody: {
      type: Boolean,
      default: true
    },
    expandAll: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      visible: false,
      filterFileText: '',
      node_had: undefined,
      resolve_had: undefined,
      treeProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  watch: {
    filterFileText(val) {
      this.$refs.fileTree.filter(val)
    }
  },
  methods: {
    init() {
      this.visible = true
      this.clearTree()
      this.$emit('setSelectFilePath', '')
    },
    filterNode(value, data) {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        this.node_had = node
        this.resolve_had = resolve
        return resolve([{ name: '文件列表' }])
      }

      fileTreeData({ id: node.key }).then(response => {
        resolve(response)
      }).catch(e => {})
    },
    //  移动文件模态框：选择目录事件
    selectNodeClick(data) {
      const selectFilePath = data.id
      this.$emit('setSelectFilePath', selectFilePath)
    },
    onSubmit() {
      this.$emit('confirmMoveFile')
      this.visible = false
    },
    clearTree() {
      if (this.node_had && this.resolve_had) {
        this.node_had.childNodes = []
        this.loadNode(this.node_had, this.resolve_had)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.move-dialog-wrapper {
  .el-dialog {
    .el-dialog__header {
      display: flex;
    }
    .el-dialog__body {
      padding: 10px 30px;
      .el-tree {
        .el-tree-node__content {
          height: 34px;
          font-size: 16px;
          .el-icon-caret-right {
            font-size: 18px;
          }
        }
        .el-tree-node.is-current>.el-tree-node__content {
          .el-tree-node__expand-icon {
            color: inherit;
          }
        }
      }
    }
  }
}
</style>
